<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			div {
				display: block;
				margin: auto;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<canvas id="canvas" style="border: 1px solid brown; display: block; margin: auto;"></canvas>
		<script src="js/digit.js"></script>
		<script>
			window.onload = function() {
				var canvas = document.getElementById("canvas");
				var cxt = canvas.getContext("2d");
				canvas.width = 800;
				canvas.height = 600;
				var r = 10;
				window.setInterval(function() {
					cxt.clearRect(0,0,canvas.width,canvas.height);
					var today = new Date();
					var h = today.getHours();
					var m = today.getMinutes();
					var s = today.getSeconds();
					var s1 = Math.floor(s % 10);
					var s10 = Math.floor(s / 10);

					switch (s1) {

						case 0:
							for (i = 0; i < 10; i++) {
								for (j = 0; j < 7; j++) {
									if (n0[i][j] == 1) {
										cxt.beginPath();
										cxt.fillStyle = "blue";
										cxt.arc(140+50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI);
										cxt.fill();
										cxt.closePath();
									}
								}
							}
							break;

						case 1:
							for (i = 0; i < 10; i++) {
								for (j = 0; j < 7; j++) {
									if (n1[i][j] == 1) {
										cxt.beginPath();
										cxt.fillStyle = "blue";
										cxt.arc(140+50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI);
										cxt.fill();
										cxt.closePath();
									}
								}
							}
							break;

						case 2:
							for (i = 0; i < 10; i++) {
								for (j = 0; j < 7; j++) {
									if (n2[i][j] == 1) {
										cxt.beginPath();
										cxt.fillStyle = "blue";
										cxt.arc(140+50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI);
										cxt.fill();
										cxt.closePath();
									}
								}
							}
							break;
						case 3:
							for (i = 0; i < 10; i++) {
								for (j = 0; j < 7; j++) {
									if (n3[i][j] == 1) {
										cxt.beginPath();
										cxt.fillStyle = "blue";
										cxt.arc(140+50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI);
										cxt.fill();
										cxt.closePath();
									}
								}
							}
							break;
						case 4:
							for (i = 0; i < 10; i++) {
								for (j = 0; j < 7; j++) {
									if (n4[i][j] == 1) {
										cxt.beginPath();
										cxt.fillStyle = "blue";
										cxt.arc(140+50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI);
										cxt.fill();
										cxt.closePath();
									}
								}
							}
							break;
						case 5:
							for (i = 0; i < 10; i++) {
								for (j = 0; j < 7; j++) {
									if (n5[i][j] == 1) {
										cxt.beginPath();
										cxt.fillStyle = "blue";
										cxt.arc(140+50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI);
										cxt.fill();
										cxt.closePath();
									}
								}
							}
							break;
						case 6:
							for (i = 0; i < 10; i++) {
								for (j = 0; j < 7; j++) {
									if (n6[i][j] == 1) {
										cxt.beginPath();
										cxt.fillStyle = "blue";
										cxt.arc(140+50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI);
										cxt.fill();
										cxt.closePath();
									}
								}
							}
							break;
						case 7:
							for (i = 0; i < 10; i++) {
								for (j = 0; j < 7; j++) {
									if (n7[i][j] == 1) {
										cxt.beginPath();
										cxt.fillStyle = "blue";
										cxt.arc(140+50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI);
										cxt.fill();
										cxt.closePath();
									}
								}
							}
							break;

						case 8:
							for (i = 0; i < 10; i++) {
								for (j = 0; j < 7; j++) {
									if (n8[i][j] == 1) {
										cxt.beginPath();
										cxt.fillStyle = "blue";
										cxt.arc(140+50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI);
										cxt.fill();
										cxt.closePath();
									}
								}
							}
							break;
						case 9:
							for (i = 0; i < 10; i++) {
								for (j = 0; j < 7; j++) {
									if (n9[i][j] == 1) {
										cxt.beginPath();
										cxt.fillStyle = "blue";
										cxt.arc(140+50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI);
										cxt.fill();
										cxt.closePath();
									}
								}
							}
							break;


					}
					
					switch (s10) {
					
						case 0:
							for (i = 0; i < 10; i++) {
								for (j = 0; j < 7; j++) {
									if (n0[i][j] == 1) {
										cxt.beginPath();
										cxt.fillStyle = "blue";
										cxt.arc(50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI);
										cxt.fill();
										cxt.closePath();
									}
								}
							}
							break;
					
						case 1:
							for (i = 0; i < 10; i++) {
								for (j = 0; j < 7; j++) {
									if (n1[i][j] == 1) {
										cxt.beginPath();
										cxt.fillStyle = "blue";
										cxt.arc(50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI);
										cxt.fill();
										cxt.closePath();
									}
								}
							}
							break;
					
						case 2:
							for (i = 0; i < 10; i++) {
								for (j = 0; j < 7; j++) {
									if (n2[i][j] == 1) {
										cxt.beginPath();
										cxt.fillStyle = "blue";
										cxt.arc(50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI);
										cxt.fill();
										cxt.closePath();
									}
								}
							}
							break;
						case 3:
							for (i = 0; i < 10; i++) {
								for (j = 0; j < 7; j++) {
									if (n3[i][j] == 1) {
										cxt.beginPath();
										cxt.fillStyle = "blue";
										cxt.arc(50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI);
										cxt.fill();
										cxt.closePath();
									}
								}
							}
							break;
						case 4:
							for (i = 0; i < 10; i++) {
								for (j = 0; j < 7; j++) {
									if (n4[i][j] == 1) {
										cxt.beginPath();
										cxt.fillStyle = "blue";
										cxt.arc(50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI);
										cxt.fill();
										cxt.closePath();
									}
								}
							}
							break;
						case 5:
							for (i = 0; i < 10; i++) {
								for (j = 0; j < 7; j++) {
									if (n5[i][j] == 1) {
										cxt.beginPath();
										cxt.fillStyle = "blue";
										cxt.arc(50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI);
										cxt.fill();
										cxt.closePath();
									}
								}
							}
							break;
						case 6:
							for (i = 0; i < 10; i++) {
								for (j = 0; j < 7; j++) {
									if (n6[i][j] == 1) {
										cxt.beginPath();
										cxt.fillStyle = "blue";
										cxt.arc(50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI);
										cxt.fill();
										cxt.closePath();
									}
								}
							}
							break;
						case 7:
							for (i = 0; i < 10; i++) {
								for (j = 0; j < 7; j++) {
									if (n7[i][j] == 1) {
										cxt.beginPath();
										cxt.fillStyle = "blue";
										cxt.arc(50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI);
										cxt.fill();
										cxt.closePath();
									}
								}
							}
							break;
					
						case 8:
							for (i = 0; i < 10; i++) {
								for (j = 0; j < 7; j++) {
									if (n8[i][j] == 1) {
										cxt.beginPath();
										cxt.fillStyle = "blue";
										cxt.arc(50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI);
										cxt.fill();
										cxt.closePath();
									}
								}
							}
							break;
						case 9:
							for (i = 0; i < 10; i++) {
								for (j = 0; j < 7; j++) {
									if (n9[i][j] == 1) {
										cxt.beginPath();
										cxt.fillStyle = "blue";
										cxt.arc(50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI);
										cxt.fill();
										cxt.closePath();
									}
								}
							}
							break;
					
					
					}
					
					
				}, 200);



			}
		</script>
	</body>
</html>
